<template>
    <el-container>
        <!--新增标签-->
        <el-dialog title="新增运费" v-el-drag-dialog :visible.sync="dialogFormVisible" width="800px">
            <el-container>
                <el-main class="popup_content">
                    <el-form ref="addFreight" :model="addFreight" size="mini" :rules="rules" label-width="100px">
                        <el-form-item label="运费名称" prop="name">
                            <el-input v-model="addFreight.name" style="width: 150px"></el-input>
                        </el-form-item>
                        <el-form-item label="运费类型" prop="type">
                            <el-select v-model="addFreight.type" placeholder="请选择类型" style="width: 80px">
                                <el-option v-for="item in freightType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="普通快递" name="first">
                                <el-main class="popup_content">
                                    <el-table border :data="freightTable" style="width: 100%">
                                        <el-table-column label="名称" width="150px">
                                            <template slot-scope="{row,column,$index}">
                                                <span v-if="$index===0">默认运费</span>
                                                <el-select style="display: inline-block" filterable v-if="$index!=0" v-model="row.areaId" placeholder="请选择城市">
                                                    <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value"></el-option>
                                                </el-select>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首重(KG)" :key="Math.random()" v-if="addFreight.type===2">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykg" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首重价格" :key="Math.random()" v-if="addFreight.type===2">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykgPrice" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="续重(KG)" :key="Math.random()" v-if="addFreight.type===2">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctd" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="续重价格" :key="Math.random()" v-if="addFreight.type===2">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctdPrice" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首件(件)" :key="Math.random()" v-if="addFreight.type===1">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykg" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="首件运费" :key="Math.random()" v-if="addFreight.type===1">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ykgPrice" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="续件(件)" :key="Math.random()" v-if="addFreight.type===1">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctd" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="续件运费" :key="Math.random()" v-if="addFreight.type===1">
                                            <template slot-scope="{row}">
                                                <el-input type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="row.ctdPrice" width="100px"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="50px">
                                            <template slot-scope="scope">
                                                <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                                                    <a style="margin-left: 10px" @click="deleteFreightTable(scope.$index)">
                                                        <i style="color: #F56C6C" class="el-icon-delete"></i>
                                                    </a>
                                                </el-tooltip>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-button type="primary" style="margin-top:15px" :loading="clicked" @click="addCity()">添加</el-button>
                                </el-main>

                            </el-tab-pane>
                            <el-tab-pane label="同城配送" name="second">
                              <el-form label-width="100px">
                                <div style="margin-bottom:20px">
                                  <span>一档：</span><span style="margin-right:10px"></span>
                                  <el-input v-model="freightTable.admin1" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                  <el-input v-model="freightTable.admin1Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                  <el-input v-model="freightTable.work1Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                </div>
                                <div style="margin-bottom:20px">
                                  <span>二档：</span><span style="margin-right:10px"></span>
                                  <el-input v-model="freightTable.admin2" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                  <el-input v-model="freightTable.admin2Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                  <el-input v-model="freightTable.work2Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                </div>
                                <div style="margin-bottom:20px">
                                  <span>三档：</span><span style="margin-right:10px"></span>
                                  <el-input v-model="freightTable.admin3" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                  <el-input v-model="freightTable.admin3Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                  <el-input v-model="freightTable.work3Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                </div>
                                <div style="margin-bottom:20px">
                                  <span>四档：</span><span style="margin-right:10px"></span>
                                  <el-input v-model="freightTable.admin4" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                  <el-input v-model="freightTable.admin4Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                  <el-input v-model="freightTable.work4Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                </div>
                                <div>
                                  <span>五档：</span><span style="margin-right:10px"></span>
                                  <el-input v-model="freightTable.admin5" placeholder="请输入件数" style="width:80px;margin-right:10px"></el-input><span>{{addFreight.type==1?'件以上,每件':"kg以上,每kg"}}</span>
                                  <el-input v-model="freightTable.admin5Price" placeholder="请输入价格" style="width:80px;margin-right:10px"></el-input><span>元,跨站结算</span>
                                  <el-input v-model="freightTable.work5Price" placeholder="请输入结算价" style="width:80px;margin-right:10px"></el-input><span>元</span>

                                </div>
                              </el-form>
                                <div>
                                  <span>楼层费：</span>
                                    <el-input v-model="freightTable.levelStart" placeholder="起收楼层" style="width:80px;margin-right:10px"></el-input><span>层以上</span>
                                  <span>，每层加价</span>
                                    <el-input v-model="freightTable.levelFreight" placeholder="每层加价" style="width:80px;margin-right:10px"></el-input><span>元</span>
                                </div>
                            </el-tab-pane>

                        </el-tabs>
                    </el-form>
                </el-main>
            </el-container>
            <div slot="footer" class="dialog-footer">
                <el-row>

                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" :loading="clicked" @click="saveFreight('addFreight')">确 定</el-button>
                    </el-col>
                </el-row>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import utils from "@/utils/utils";
import { EventBus } from "@/api/eventBus";
import elDragDialog from "@/directive/el-drag-dialog";
import { save } from "../../api/freight";
import province from "../../components/Distpicker/province"; // base on element-ui
export default {
    directives: { elDragDialog },
    name: "freight-add",
    data() {
        return {
            timeoptions: [
                {
                    value: "45",
                    label: "45分钟",
                },
                {
                    value: "60",
                    label: "60分钟",
                },
                {
                    value: "75",
                    label: "75分钟",
                },
                {
                    value: "90",
                    label: "90分钟",
                },
                {
                    value: "105",
                    label: "105分钟",
                },
                {
                    value: "120",
                    label: "120分钟",
                },
            ],
            activeName: "first",
            addFreight: {
                type: 2,
                name: "",
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入运费名称",
                        trigger: "blur",
                    },
                ],
            },
            itemList: [],
            options: [],
            dialogFormVisible: false,
            clicked: false,
            freightTable: [],
            freightType: [
                {
                    value: 1,
                    label: "计件",
                },
                {
                    value: 2,
                    label: "计重",
                },
            ],
        };
    },

    created() {
        let cityList = [];
        this.addFreight.name = "";
        this.freightTable = [];
        this.formatCity(province[100000], cityList);
        this.options = cityList;
        this.addCity();
    },
    methods: {
        deleteFreightTable(index) {
            this.freightTable.splice(index, 1);
            // this.itemList.splice(index,1)
        },
        cancel() {
            this.dialogFormVisible = false;
            this.addFreight.name = "";
            this.freightTable = [];
        },
        clean() {
            this.addFreight.name = "";
            this.freightTable = [];
        },
        formatCity(ARR, array) {
            for (const key in ARR) {
                let obj = {};
                obj.value = key;
                obj.label = ARR[key];
                array.push(obj);
                if (province[key]) {
                    obj.children = [];
                    this.formatCity(province[key], obj.children);
                }
            }
        },
        addCity() {
            var freightTable = {
                createDate: new Date(),
                modifyDate: new Date(),
                type: this.addFreight.type,
                ykg: "",
                levelFreight: 0,
                enabledLevel: this.enabledLevel,
                areaId: "",
                ctd: "",
                ctdPrice: "",
                levelStart: 0,
                ykgPrice: "",
            };
            if (freightTable.levelStart) {
                this.enabledLevel = true;
            } else {
                this.enabledLevel = false;
            }
            this.freightTable.push(freightTable);
            if (this.freightTable.length > 1) {
                this.itemList.push(freightTable);
            }
        },
        addFreightClick() {
            this.freightTable = [];
            this.dialogFormVisible = true;
            var freightTable = {
                createDate: new Date(),
                modifyDate: new Date(),
                type: this.addFreight.type,
                ykg: "",
                // levelFreight:0,
                areaId: "",
                enabledLevel: this.enabledLevel,
                ctd: "",
                ctdPrice: "",
                // levelStart:0,
                ykgPrice: "",
            };
            if (freightTable.levelStart) {
                this.enabledLevel = true;
            } else {
                this.enabledLevel = false;
            }
            this.freightTable.push(freightTable);
        },

        saveFreight(addFreight) {
            this.$refs[addFreight].validate((valid) => {
                if (valid) {
                    this.clicked = true;
                    let freight = {
                        createDate: new Date(),
                        modifyDate: new Date(),
                        name: this.addFreight.name,
                        type: this.addFreight.type,
                        ykg: "",
                        levelFreight: 0,
                        enabledLevel: "",
                        ctd: "",
                        ctdPrice: "",
                        levelStart: 0,
                        ykgPrice: "",
                        itemList: [],
                        admin1: "",
                        admin1Price: "",
                        admin2: "",
                        admin2Price: "",
                        admin3: "",
                        admin3Price: "",
                        admin4: "",
                        admin4Price: "",
                        admin5: "",
                        admin5Price: "",
                        time1:"",
                        time1Price:"",
                        time2:"",
                        time2Price:"",
                        time3:"",
                        time3Price:"",
                        time4:"",
                        time4Price:"",
                        time5:"",
                        time5Price:"",
                    };
                    if (this.freightTable.length > 1) {
                        this.freightTable.splice(0, 1);
                        freight.itemList = this.freightTable;
                    }
                    freight.ykg = this.freightTable[0].ykg;
                    freight.ctd = this.freightTable[0].ctd;
                    freight.ctdPrice = this.freightTable[0].ctdPrice;
                    freight.ykgPrice = this.freightTable[0].ykgPrice;
                    if (utils.isNull(this.freightTable.levelFreight)) {
                        freight.levelFreight = 0;
                    } else {
                        freight.levelFreight = this.freightTable.levelFreight;
                    }
                    if (utils.isNull(this.freightTable.levelStart)) {
                        freight.levelStart = 0;
                    } else {
                        freight.levelStart = this.freightTable.levelStart;
                    }
                    freight.admin1 = this.filter(this.freightTable.admin1);
                    freight.admin1Price = this.filter(this.freightTable.admin1Price);
                    freight.admin2 = this.filter(this.freightTable.admin2);
                    freight.admin2Price = this.filter( this.freightTable.admin2Price);
                    freight.admin3 = this.filter(this.freightTable.admin3);
                    freight.admin3Price = this.filter(this.freightTable.admin3Price);
                    freight.admin4 = this.filter(this.freightTable.admin4);
                    freight.admin4Price = this.filter(this.freightTable.admin4Price);
                    freight.admin5 = this.filter(this.freightTable.admin5);
                    freight.admin5Price = this.filter(this.freightTable.admin5Price);
                    freight.time1 = this.filter(this.freightTable.time1);
                    freight.time1Price = this.filter(this.freightTable.time1Price);
                    freight.time1 = this.filter(this.freightTable.time1);
                    freight.time1Price = this.filter(this.freightTable.time1Price);
                    freight.time2 = this.filter(this.freightTable.time2);
                    freight.time2Price = this.filter(this.freightTable.time2Price);
                    freight.time3 = this.filter(this.freightTable.time3);
                    freight.time3Price = this.filter(this.freightTable.time3Price);
                    freight.time4 = this.filter(this.freightTable.time4);
                    freight.time4Price = this.filter(this.freightTable.time4Price);
                    freight.time5 = this.filter(this.freightTable.time5);
                    freight.time5Price = this.filter(this.freightTable.time5Price);
                    if (freight.levelStart > 0) {
                        this.enabledLevel = true;
                    } else {
                        this.enabledLevel = false;
                    }
                    freight.enabledLevel = this.enabledLevel;
                    if (
                        freight.ykg == "" ||
                        freight.ctd == "" ||
                        freight.ctdPrice == "" ||
                        freight.ykgPrice == ""
                    ) {
                        this.$message.error("请完善运费模板信息");
                        this.clicked = false;
                        return;
                    } else {
                        console.log(freight);
                        save(freight).then((response) => {
                            this.clicked = false;
                            this.dialogFormVisible = false;
                            this.$emit("loadFreight");
                            EventBus.$emit("freight-add", response.data);
                        });
                    }
                }
            });
        },
        filter(val) {
            if (utils.isNull(val)) {
                return 0;
            } else {
                return val;
            }
        },
    },
};
</script>

<style scoped>
.popup_content {
    padding-bottom: 0px !important;
}
.el-footerBox {
    height: 50px !important;
    line-height: 50px !important;
    border-top: 1px solid #eeeeee;
}

/deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
}

/deep/ .el-dialog__body {
    padding: 0px 20px !important;
    margin-top: 20px;
    margin-bottom: 10px;
}
/deep/.el-main {
    padding: 0px;
}
</style>
